<template>
	<view class="music flex justify-between align-center">
		<view class="flex justify-center">
			<button class="cu-btn round" @click="goBack">返回</button>
		</view>
		<view class="flex justify-center">
			<button v-if="!info.user_id" class="cu-btn round" @click="create">我要创建相册</button>
		</view>
		<view class="flex justify-center">
			<image :class="{'play':is_play}" :src="is_play?play_src:on_src" mode="aspectFit" @click="operate">
			</image>
		</view>
	</view>
</template>

<script>
	// #ifndef MP-WEIXIN
	const app = getApp();
	// #endif
	// #ifdef MP-WEIXIN
	const app = getApp().$vm;
	// #endif
	export default {
		name: "bg-music",
		props:{
			info:{
				type:Object,
				default(){
					return {};
				}
			}
		},
		mounted() {
			console.log(app)
			app.innerAudioContext.play();
		},
		beforeDestroy() {
			app.innerAudioContext.pause();
		},
		data() {
			return {
				play_src: '',
				on_src: '',
			};
		},
		methods: {
			operate() {
				if (!this.is_play) {
					app.innerAudioContext.play();
				} else {
					app.innerAudioContext.pause();
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			create() {
				let url = `/pages/create/create?id=${this.info._id}&len=${this.info.len}&num=${this.info.num}`;
				// #ifdef MP-WEIXIN
				let path = this.vuex_token ? url : '/pages/login/choose';
				// #endif
				// #ifndef MP-WEIXIN
				let path = this.vuex_token ? url : '/pages/login/login';
				// #endif
				uni.navigateTo({
					url: path,
					fail(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.music {
		position: fixed;
		width: 100%;
		bottom: 100rpx;
		z-index: 101;
		padding: 0 80rpx;
		left: 0;
		image {
			width: 70rpx;
			height: 70rpx;
			z-index: 102;
		}

		.play {
			animation: musicKey 6s linear infinite;
		}
	}

	.cu-btn {
		background-color: rgba($color: #ffffff, $alpha: 0);
		color: #FFFFFF;
		border: 1px solid rgba($color: #ffffff, $alpha: 0.5);
	}

	@keyframes musicKey {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}
</style>
